<template>
  <input
    :type="type"
    :class="inputClass"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  name: 'Input',
  props: {
    type: {
      type: String,
      default: 'text',
    },
    modelValue: {
      type: [String, Number],
      default: '',
    },
  },
  computed: {
    inputClass() {
      return 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
    },
  },
};
</script>

<style scoped>
/* Define colors if not globally available via Tailwind config */
.border-input { border-color: #e5e7eb; /* gray-200 */ }
.bg-background { background-color: #ffffff; }
.placeholder\:text-muted-foreground::placeholder { color: #6b7280; /* gray-500 */ }
.focus-visible\:ring-ring { --tw-ring-color: #3b82f6; /* blue-500 */ }
</style>
